<template>
	<view class="upload-container">
		<view class="upload">
			<view>
				<!-- <image v-if="imgUrl.length>0" mode="widthFix" style="object-fit: contain;"
					v-for="(item, index) in imgUrl" :key="index" :src="item" alt="">
				</image> -->
				         <block v-for="(item ,index) in imgUrl" v-if="imgUrl.length>0">
					       <view class="item">
						  <image :src="item" mode="widthFix" style="object-fit: contain;" alt=""></image>
						<!-- 移除图片的按钮  -->
						<image class="deldete" style="width:36upx; height:36upx;" src="@/static/images/delete.jpg"
							@click="btnDeleteImg(index)" mode="widthFix"></image>
					</view>
				</block>
				<uni-icons v-if="imgUrl.length<=0" custom-prefix="custom-icon" type="plusempty" size="30"
					@click.native="uploadFile">
				</uni-icons>

			</view>
		</view>
		<view>
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
					<uni-forms-item label="车架号" required name="vin">
						<uni-easyinput v-model="valiFormData.vin" placeholder="请输入车架号" />
					</uni-forms-item>
					<uni-forms-item label="车牌号" name="licenseNo">
						<uni-easyinput v-model="valiFormData.licenseNo" placeholder="请输入车牌号" />
					</uni-forms-item>
					<uni-forms-item label="发动机号" name="engine">
						<uni-easyinput v-model="valiFormData.engine" placeholder="请输入发动机号" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" class="un-btn" @click="submit('valiForm')">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		submitUpload,
		ossUpload
	} from "@/api/infoList/index"
	import {
		toast
	} from '@/utils/common'
	import config from '@/config'
	import axios from 'axios';
	export default {
		data() {
			return {
				searchValue: '',
				// 校验表单数据
				valiFormData: {
					vin: '',
					licenseNo: '',
					engine: '',
					imageUrl: '',
				},
				// 校验规则
				rules: {
					vin: {
						rules: [{
							required: true,
							errorMessage: '车架号不能为空'
						}]
					},
					// engine: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '发动机号不能为空'
					// 	}]
					// },
					// licenseNo: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '车牌号不能为空'
					// 	}]
					// }
				},
				imgUrl: [],
				productCode: ''
			}
		},
		onLoad(option) {
			this.productCode = option.productCode
		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					let obj = this.valiFormData
					obj.productCode = this.productCode
					uni.showLoading({
						title: '加载中'
					});
					submitUpload(obj).then(response => {
						if (response.code === 200) {
							this.$modal.showToast(`${response.msg}`)
							uni.navigateTo({
								url: `/pages/infoList/index?productCode=${this.productCode}`
							})
						} else {
							this.$modal.msgError(`${response.msg}`)
						}
						uni.hideLoading();
					})
				}).catch(err => {
					console.log('err', err);
					uni.hideLoading();
				})
			},
			uploadFile() {
				let _this = this
				uni.chooseImage({
					success: function(res) {
						const {
							tempFiles,
							tempFilePaths
						} = res;
						const file = tempFiles[0];
						// _this.imgUrl = tempFilePaths || [];
						const formData = new FormData();
						formData.append('file', file);
						axios({
							url: config.baseUrl + '/ossController/upload',
							method: "POST",
							headers: {
								"Content-Type": "multipart/form-data"
							},
							data: formData
						}).then(res => {
							if (!res.data) {
								toast('上传失败')
								_this.valiFormData.imageUrl = ''
								_this.imgUrl = []
							} else {
								toast('上传成功')
								_this.valiFormData.imageUrl = res.data
								_this.imgUrl = tempFilePaths || [];
							}
						}).catch((error) => {
							toast('上传失败')
							_this.valiFormData.imageUrl = ''
							_this.imgUrl = []
						})
					}
				});
			},
			// 删除图片
			btnDeleteImg(index) {
				var _this = this
				uni.showModal({
					content: "是否删除该图片！",
					success(res) {
						if (res.confirm) { //删除
							_this.imgUrl.splice(index, 1)
							_this.valiFormData.imageUrl = ''
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.deldete {
		width: 70upx !important;
		height: 70upx !important;
		position: absolute;
		top: 0upx;
		right: 30upx;

		image {
			width: 100%;
		}
	}

	.q-image-remover {
		width: 0;
		height: 0;
		border-top: 66upx solid #bfde85;
		border-left: 66upx solid transparent;
		// position: absolute;
		top: 0;
		right: 30upx;
	}

	.item {
		position: relative;
		// height: 220rpx;
		// width: 30%;
		// margin-left: 2.5%;
		// margin-top: 20rpx;
	}

	.upload-container {
		height: 100%;
		background: #ffff;

		/deep/ .un-btn {
			line-height: 60upx;
			;
		}
	}

	.upload {
		padding: 15px;
		box-sizing: border-box;
		text-align: center;
	}

	.example {
		padding: 15px;
		box-sizing: border-box;
		background-color: #fff;
		height: calc(100vh - 240upx);
	}
</style>